<template>
  <div class="info-tooltip" :style="{
    left: position.x + 'px',
    top: position.y + 'px'
  }">
    <div class="tooltip-header">
      <h4 class="poi-name">{{ poi.name }}</h4>
      <div class="poi-status" :class="poi.status">
        {{ getStatusText(poi.status) }}
      </div>
    </div>

    <div class="tooltip-content">
      <!-- 景点信息 -->
      <template v-if="poi.type === 'scenic'">
        <div class="info-item">
          <span class="label">今日累计:</span>
          <span class="value">{{ poi.todayVisitors }}人</span>
        </div>
        <div class="info-item">
          <span class="label">当前人数:</span>
          <span class="value">{{ poi.currentVisitors }}人</span>
        </div>
      </template>

      <!-- 监控信息 -->
      <template v-if="poi.type === 'monitor'">
        <div class="info-item">
          <span class="label">设备类型:</span>
          <span class="value">{{ poi.cameraType }}</span>
        </div>
        <div class="info-item">
          <span class="label">覆盖范围:</span>
          <span class="value">{{ poi.coverage }}</span>
        </div>
      </template>

      <!-- 出入口信息 -->
      <template v-if="poi.type === 'entrance'">
        <div class="info-item">
          <span class="label">今日进入:</span>
          <span class="value">{{ poi.todayEntries }}人</span>
        </div>
        <div class="info-item">
          <span class="label">排队人数:</span>
          <span class="value">{{ poi.currentQueue }}人</span>
        </div>
      </template>

      <!-- 住宿信息 -->
      <template v-if="poi.type === 'hotel'">
        <div class="info-item">
          <span class="label">房间数:</span>
          <span class="value">{{ poi.roomCount }}间</span>
        </div>
        <div class="info-item">
          <span class="label">入住率:</span>
          <span class="value">{{ poi.occupancyRate }}%</span>
        </div>
      </template>

      <!-- 餐饮信息 -->
      <template v-if="poi.type === 'restaurant'">
        <div class="info-item">
          <span class="label">菜系:</span>
          <span class="value">{{ poi.cuisine }}</span>
        </div>
        <div class="info-item">
          <span class="label">就餐率:</span>
          <span class="value">{{ Math.round(poi.currentOccupancy / poi.capacity * 100) }}%</span>
        </div>
      </template>

      <!-- 服务信息 -->
      <template v-if="poi.type === 'service'">
        <div class="info-item">
          <span class="label">服务类型:</span>
          <span class="value">{{ poi.serviceType }}</span>
        </div>
        <div class="info-item" v-if="poi.chargingPorts">
          <span class="label">可用充电桩:</span>
          <span class="value">{{ poi.availablePorts }}/{{ poi.chargingPorts }}</span>
        </div>
      </template>

      <!-- 商业信息 -->
      <template v-if="poi.type === 'business'">
        <div class="info-item">
          <span class="label">类型:</span>
          <span class="value">{{ poi.businessType }}</span>
        </div>
        <div class="info-item">
          <span class="label">今日营收:</span>
          <span class="value">¥{{ poi.todayRevenue.toLocaleString() }}</span>
        </div>
      </template>
    </div>

    <div class="tooltip-arrow"></div>
  </div>
</template>

<script setup>
const props = defineProps({
  poi: {
    type: Object,
    required: true
  },
  position: {
    type: Object,
    required: true
  }
})

const getStatusText = (status) => {
  const statusMap = {
    active: '运行中',
    normal: '正常',
    maintenance: '维护中',
    offline: '离线'
  }
  return statusMap[status] || '未知'
}
</script>

<style scoped>
.info-tooltip {
  position: absolute;
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(0, 255, 136, 0.5);
  border-radius: 8px;
  padding: 0.8rem;
  color: #ffffff;
  font-size: 0.8rem;
  min-width: 180px;
  max-width: 220px;
  z-index: 1000;
  pointer-events: none;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  transform: translate(-50%, -100%);
  margin-top: -10px;
  animation: tooltipFadeIn 0.2s ease-out;
}

.tooltip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(0, 255, 136, 0.3);
}

.poi-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: #00ff88;
  margin: 0;
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
}

.poi-status {
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 500;
}

.poi-status.active {
  background: rgba(0, 255, 136, 0.2);
  color: #00ff88;
}

.poi-status.normal {
  background: rgba(0, 188, 212, 0.2);
  color: #00bcd4;
}

.poi-status.maintenance {
  background: rgba(255, 171, 64, 0.2);
  color: #ffab40;
}

.poi-status.offline {
  background: rgba(244, 67, 54, 0.2);
  color: #f44336;
}

.tooltip-content {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
}

.value {
  color: #ffffff;
  font-weight: 600;
  font-size: 0.8rem;
}

.tooltip-arrow {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(0, 0, 0, 0.9);
}

@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -100%) scale(0.8);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -100%) scale(1);
  }
}

/* 响应式设计 */
@media screen and (max-width: 1400px) {
  .info-tooltip {
    min-width: 160px;
    max-width: 200px;
    padding: 0.6rem;
    font-size: 0.75rem;
  }

  .poi-name {
    font-size: 0.8rem;
  }

  .label {
    font-size: 0.7rem;
  }

  .value {
    font-size: 0.75rem;
  }
}
</style>